import Vue from "vue";
import $ from "jquery";
import com from "../../../utils/common";
// import "../../../utils/cropper";
// import html2canvas from "../../../utils/html2canvas";
import Loading from "../../components/loading";
let voteUserJoin = {};
voteUserJoin.Temp = `  
<div class="user_join">
  <div class="pop_mask">
        <div class="pop_user_msg">
            <div class="container">
                <header>
                    <h3>请上传参赛作品</h3>
                    <p>注意:<i>*</i>为必填项</p>
                </header>
                <div class="content">
                    <div>
                        <p><i>*</i><span>姓名</span><b>:</b></p>
                        <input v-model="Name" type="text" placeholder="请输入您的姓名">
                    </div>
                    <div>
                        <p><i>*</i><span>手机</span><b>:</b></p>
                        <input v-model="Mobile" type="number" inputmode="numeric" pattern="[0-9]*"
                               placeholder="请输入您的手机号">
                    </div>
                    <div>
                        <p><i>*</i><span>作品名称</span><b>:</b></p>
                        <input v-model="WorkName" type="text"  placeholder="请输入您的作品名称">
                    </div>
                    <div style="height: auto">
                        <p><i>*</i><span>参赛宣言</span><b>:</b></p>
                        <textarea class="join-slogan"  v-model="JoinSlogan" placeholder="留下自己的个性宣言或是介绍一下参赛作品"></textarea>
                    </div>
                </div>
                <div class="picture_select">
                    <div class="change_picture"><p style="color: #fff;">上传图片</p><input type="file" id="file" accept="image/jpg,image/jpeg,image/png,image/gif" @change="upWorkImage"></div>
                    <p>最多支持上传一张图片</p>
                    <div class="picture_site">
                    <img alt="" :src="JoinWorkImg">
                    </div>
                </div>
                <footer>
                    <a href="javascript:;"  v-on:click="JoinAct">提交参赛作品</a>
                </footer>
                <p class="back_mine" v-on:click="BackMine">我已报名,回到
                      <a href="javascript:;">我的页面</a>
                  </p>
            </div>
        </div>
    </div>  
  <!--<div class="img_container">
        <div class="save" id="save" v-on:click="saveCropperImg">
            <p>保存</p>
        </div>
        <div class="content" id="cropImg">
          <div id="ImgCon">
              <img src="/img/activity/collect/vote/test.jpg" alt="" id="picture" style="width: 100%;">
          </div>
          <p style="padding: 0.3rem 0.3rem;color:#0099ff;">图片预览</p>
          <div class="img_preview"></div>
        </div>   
  </div>-->
</div>
`;
let VoteUserJoin = Vue.extend({
  template: voteUserJoin.Temp,
  data: function() {
    return {
      Name: "",
      Mobile: "",
      WorkName: "",
      JoinSlogan: "",
      JoinWorkImg: ""
    };
  },
  methods: {
    upWorkImage: function() {
      let self = this;
      let inputDom = $("#file");
      console.log(inputDom[0].files);
      let formData = new FormData();
      formData.append("file", inputDom[0].files[0]);
      Loading.mask();
      com.UploadOneFile(formData, function(data) {
        console.log(data);
        let imgData = data.body;
        console.log(imgData);
        for (let Key in imgData) {
          self.JoinWorkImg = imgData[Key];
        }
        Loading.unmask();
      });
    },
    // 提交报名信息
    JoinAct: function() {
      let JoinMsg = {};
      JoinMsg.Name = this.Name;
      JoinMsg.Mobile = this.Mobile;
      let Other = {};
      Other.WorkName = this.WorkName;
      Other.JoinSlogan = this.JoinSlogan;
      console.log(Other);
      JoinMsg.Other = JSON.stringify(Other);
      JoinMsg.JoinWorkImg = this.JoinWorkImg;
      console.log(JoinMsg);
      if (com.CheckMobile(JoinMsg.Mobile)) {
        this.$emit("join", JoinMsg);
      } else {
        com.alertDialog("号码错误,请核对");
      }
    },
    BackMine: function() {
      this.$emit("back");
    }

    /*// 选中文件时上传
    upImage: function () {
      let r = new FileReader();
      let file = document.getElementById('file')
      let f = file.files[0];
      let size = 1;
      r.readAsDataURL(f);
      r.onload = function (e) {
        $("#cropImg").html(`
        <div class="container" id="ImgCon">
            <img src="/img/activity/collect/vote/test.jpg" alt="" id="picture" style="width: 100%;">
        </div>
        <p style="padding: 0.3rem 0.3rem;color:#0099ff;">图片预览</p>
        <div class="img_preview"></div>`);
        $("#picture").attr("src", this.result);
        $('.pop_user_msg,.pop_mask').hide();
        $('.img_container').show();
        $('#ImgCon > img').cropper({
          aspectRatio: size,
          preview: '.img_preview',
          guides: false,
          dragCrop: false,
          background: false,
          crop: function () {
          }
        });

      }
    },

    // 调用截图
    saveCropperImg:function () {
      let imgCon = $('.img_preview');
      let picSite = $('.picture_site');
      //  裁图
      this.saveImg(imgCon, picSite);
    },
    // 截取选中区域图片
    saveImg:function (domImage, imgPosition) {
      let appSelf = this;
      let shareContent = domImage; // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
      let width = shareContent.width(); // 获取(原生）dom 宽度
      let height = shareContent.height(); // 获取(原生）dom 高
      let offsetTop = shareContent.offset().top; //元素距离顶部的偏移量
      //console.log(offsetTop);
      let canvas = document.createElement("canvas"); //创建canvas 对象
      let context = canvas.getContext("2d");
      let scaleBy = appSelf.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
      //console.log(scaleBy);
      canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
      canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
      context.scale(scaleBy, scaleBy);
      html2canvas(domImage, {
        onrendered: function (canvas) {
          let url = canvas.toDataURL();
          appSelf.upCropperImg(url);
          let img = new Image();
          img.src = url;
          domImage.hide();
          imgPosition.html(img);
          $('.img_container').hide();
          $('.change_picture > p').text('修改图片');
          $('.pop_user_msg,.pop_mask').show();
        }
      });
    },
    // base64 的图片上传
    upCropperImg:function (data64) {
      data64 = data64.split(',')[1];
      let upData = data64;
      data64 = window.atob(data64);
      let ia = new Uint8Array(data64.length);
      for (let i = 0; i < data64.length; i++) {
        ia[i] = data64.charCodeAt(i);
      }
      let blob=new Blob([ia], {type:"image/png"});
      let fd=new FormData();
      fd.append('files',blob);
      Loading.mask();
      com.UploadFile(fd,function (data) {
        console.log(data);
        let imgData = data.body;
        for (let i in imgData) {
          console.log(imgData)
        }
        Loading.unmask();
      })
    },
    // 获取像素密度
    getPixelRatio:function (context) {
      let backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    }*/
  }
});

export default VoteUserJoin;
